{% extends "base.html" %}

{% load static %}

{% block content %}
    <div class="cart_list">
        <div class="cart_top">
            我的收藏
            <span style="float: right;">
                <button class="btn">
                    <!-- 需完善a标签href属性 -->
                    <a href="/Buyer/history_collect_list/" style="color: white;">历史收藏</a>
                </button>
            </span>
        </div>
        <div class="cart_listbox">
            <table width="100%" cellpadding="0" cellspacing="0" border='0px'>
                <tr>
                    <th width='10%'>
                        <input type="checkbox" id="all"
                               style="margin-top: 20px; margin-left: 10px;width: 24px; height: 24px;">
                    </th>
                    <th width='20%'>商品名称</th>
                    <th width='10%'>商品缩略图</th>
                    <th width='10%'>商品价格</th>
                    <th width='13%'>商品库存</th>
                    <th width='13%'>商品销量</th>
                    <th width='13%'>商品浏览量</th>
                    <th width='10%'>操作</th>
                </tr>
                {% for goods_collect in goods_collects %}
                    <tr>
                        <th width='10%'>
                            <input type="checkbox" id="all"
                                   style="margin-top: 20px; margin-left: 10px;width: 24px; height: 24px;">
                        </th>
                        <!-- 须传入收藏商品名称 -->
                        <th width='20%'>{{ goods_collect.goods.goods_name }}</th>
                        {% for img_path in goods_collect.goods.image_set.all %}
                            <th width='10%'>
                                <!-- 需完善img标签src属性 -->
                                <img src="/static/{{ img_path.img_address }}">
                            </th>
                        {% endfor %}、
                        <!-- 须传入收藏商品价格 -->
                        <th width='10%'>{{ goods_collect.goods.goods_cprice }}</th>
                        <!-- 须传入收藏商品库存 -->
                        <th width='13%'>{{ goods_collect.goods.goods_kucun }}</th>
                        <!-- 须传入收藏商品销量 -->
                        <th width='13%'>{{ goods_collect.goods.goods_sales }}</th>
                        <!-- 须传入收藏商品浏览量 -->
                        <th width='13%'>{{ goods_collect.goods.goods_browses }}</th>
                        <th width='10%'>
                            <!-- 需完善a标签href属性 -->
                            <a href="/Buyer/collect_cancel/?goods_id={{ goods_collect.goods.id }}">取消收藏</a>
                        </th>
                    </tr>
                {% endfor %}

            </table>
        </div>
    </div>
    <script>
        function submit() {
            var inputs = document.getElementsByName("checkbox");
            var result = "/buyer/enter_order?";
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].checked) {
                    result += "key_" + i + "=" + inputs[i].value + "&"
                }
            }
            window.location.href = result.slice(0, -1)
        }

        function check(selector) {
            return document.querySelector(selector)//捕获的是一个数组
        }

        check("#all").onclick = function () {
            var input = document.getElementsByName("checkbox");
            for (var i = 0; i < input.length; i++) {
                input[i].checked = this.checked //this 执行函数的对象 checked 属性 返回当中选中的状态，也可以赋值使用
            }
        };
        var inputs = document.getElementsByName("checkbox");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = function () {
                var flag = true;
                /*flag = false 底下的复选框全被选中*/
                for (var j = 0; j < inputs.length; j++) {
                    if (!inputs[j].checked) {
                        flag = false;
                    }
                }
                check('#all').checked = flag;
            }
        }


    </script>
{% endblock %}